: flex-start;
min-height: 100vh;
color: #0277BD; /* 深蓝色文字 */
text-align: center;
flex-wrap: wrap; /* 允许换行 */
padding: 20px;
}

.section {
position: relative;
width: calc(25% - 40px); /* 每个大盒子占据三分之一的宽度，并留出左右间距 */
margin:5px 10px;
}

.section-title {
font-size: 32px;
margin-bottom: 15px;
cursor: pointer;
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(0, 150, 199, 0.3); /* 浅蓝色阴影 */
}

.sub-modules {
display: none; /* 隐藏子模块 */
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.9); /* 白色背景，带透明度 */
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(0, 150, 199, 0.3); /* 浅蓝色阴影 */
padding: 20px;
z-index: 1;
}

.section:hover .sub-modules {
display: block; /* 鼠标悬停时显示子模块 */
}

.container {
background: rgba(255, 255, 255, 0.8); /* 白色背景，带透明度 */
padding: 20px;
border-radius: 15px;
margin-bottom: 10px; /* 两个容器之间的距离 */
transition: transform 0.3s ease;
}

.container:hover {
transform: scale(1.05);
}

.dynamic-link {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
color: #0277BD; /* 深蓝色文字 */
text-decoration: none;
}

.dynamic-link img {
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 150, 199, 0.3); /* 浅蓝色阴影 */
}

.dynamic-link span {
font-size: 20px;
font-weight: 600;
}

.dynamic-link:hover span {
text-shadow: 0 0 10px rgba(0, 150, 199, 0.7); /* 浅蓝色光晕 */
}
</style>
